<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>购物车</title>
    <!-- 引入bootstrap的css文件 -->
    <link rel="stylesheet" href="./bootstrap3/css/bootstrap.css" />
    <!-- 引入自己写的css -->
    <link rel="stylesheet" href="./css/style.css" />
    <!-- 用于支持ie8标签和媒体的查询 -->
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
  </head>
  <body>
    <!-- navbar -->
    <nav class="navbar-inverse" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <button
            class="navbar-toggle collapsed"
            type="buttton"
            data-toggle="collapse"
            data-target="#bs-example-navbar-collapse-1"
          >
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a href="index.html" class="navbar-brand">Bootstrap 商城</a>
        </div>
        <!-- 导航链接及内容 -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="dropdown">
              <a href="#" class="active dropdown-toggle" data-toggle="dropdown">
                所有商品分类
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="category.html">吃的</a></li>
                <li><a href="category.html">喝的</a></li>
                <li><a href="category.html">玩的</a></li>
                <li><a href="category.html">凑数</a></li>
                <li><a href="category.html">凑数</a></li>
                <li><a href="category.html">凑数</a></li>
                <li class="divider"></li>
                <li><a href="ecommerce.html">所有商品分类</a></li>
              </ul>
            </li>
            <li>
              <a href="https://www.cnblogs.com/sex-luthor/" target="_blank"
                >我的博客园</a
              >
            </li>
            <li>
              <a href="https://gitee.com/sex-luthor/" target="_blank"
                >我的码云</a
              >
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li>
              <a href="#">
                <span class="badge pull-right">4</span>
                <i class="glyphicon glyphicon-shopping-cart"></i>
              </a>
            </li>
            <li>
              <a href="account.html">
                <i class="glyphicon glyphicon-user"></i>
              </a>
            </li>
            <li>
              <a href="#" data-toggle="modal" data-target="#myModal">登录</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- Modal -->
    <div
      class="modal fade"
      id="myModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="myModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button class="close" type="button" data-dismiss="modal">
              <span aria-hidden="true">&times;</span>
              <span class="sr-only">关闭</span>
            </button>
            <h2 class="modal-title" id="myModalLabel">登录</h2>
          </div>
          <div class="modal-body">
            <form role="form" class="form-signin">
              <h3 class="form-signin-heading">电子邮箱登录</h3>
              <div class="form-group">
                <input
                  type="email"
                  class="form-control"
                  placeholder="电子邮箱"
                  required
                  autofocus
                />
              </div>
              <div class="form-group">
                <input
                  type="password"
                  class="form-control"
                  placeholder="密码"
                  required
                />
              </div>
              <div class="checkbox">
                <label>
                  <input type="checkbox" value="remember-me" />记住用户名
                </label>
              </div>
              <button class="btn btn-lg btn-primary btn-block" type="submit">
                登录</button
              ><br />
            </form>
          </div>
        </div>
      </div>
    </div>
    <!-- 主题页面 -->
    <div class="container" id="content">
      <div class="row">
        <div class="col-md-3">
          <h3>管理订单</h3>
          <div class="list-group">
            <a href="account.html" class="list-group-item">所有订单</a>
            <a href="account.html" class="list-group-item">管理反馈</a>
            <a href="account.html" class="list-group-item">我的优惠券</a>
            <a href="account.html" class="list-group-item">我的收货地址</a>
          </div>
        </div>
        <div class="col-md-9">
          <h3>订单状态</h3>
          <div class="thumbnail buy-thumbnail">
            <div class="row-fluid">
              <div class="col-sm-1 hidden-xs">
                <img src="./images/5.png" alt="xxx" class="img-responsive">
              </div>
              <div class="col-sm-4 col-xs-4">
                <a href="product.html">产品名称</a>
              </div>
              <div class="col-sm-1 hidden-xs">
                1
              </div>
              <div class="col-sm-2 hidden-xs">
                $111111
              </div>
              <div class="col-sm-2 col-xs-4">
                <button class="btn btn-sm btn-default">跟踪订单</button>
              </div>
              <div class="col-sm-2 c0l-xs-4"><a href="#">信息</a></div>
            </div>
          </div>
          <div class="thumbnail buy-thumbnail">
              <div class="row-fluid">
                <div class="col-sm-1 hidden-xs">
                  <img src="./images/5.png" alt="xxx" class="img-responsive">
                </div>
                <div class="col-sm-4 col-xs-4">
                  <a href="product.html">产品名称</a>
                </div>
                <div class="col-sm-1 hidden-xs">
                  1
                </div>
                <div class="col-sm-2 hidden-xs">
                  $111111
                </div>
                <div class="col-sm-2 col-xs-4">
                  <button class="btn btn-sm btn-default">跟踪订单</button>
                </div>
                <div class="col-sm-2 c0l-xs-4"><a href="#">信息</a></div>
              </div>
            </div>
            <div class="thumbnail buy-thumbnail">
                <div class="row-fluid">
                  <div class="col-sm-1 hidden-xs">
                    <img src="./images/5.png" alt="xxx" class="img-responsive">
                  </div>
                  <div class="col-sm-4 col-xs-4">
                    <a href="product.html">产品名称</a>
                  </div>
                  <div class="col-sm-1 hidden-xs">
                    1
                  </div>
                  <div class="col-sm-2 hidden-xs">
                    $111111
                  </div>
                  <div class="col-sm-2 col-xs-4">
                    <button class="btn btn-sm btn-default">跟踪订单</button>
                  </div>
                  <div class="col-sm-2 c0l-xs-4"><a href="#">信息</a></div>
                </div>
              </div>
              <div class="thumbnail buy-thumbnail">
                  <div class="row-fluid">
                    <div class="col-sm-1 hidden-xs">
                      <img src="./images/5.png" alt="xxx" class="img-responsive">
                    </div>
                    <div class="col-sm-4 col-xs-4">
                      <a href="product.html">产品名称</a>
                    </div>
                    <div class="col-sm-1 hidden-xs">
                      1
                    </div>
                    <div class="col-sm-2 hidden-xs">
                      $111111
                    </div>
                    <div class="col-sm-2 col-xs-4">
                      <button class="btn btn-sm btn-default">跟踪订单</button>
                    </div>
                    <div class="col-sm-2 c0l-xs-4"><a href="#">信息</a></div>
                  </div>
                </div><div class="thumbnail buy-thumbnail">
                    <div class="row-fluid">
                      <div class="col-sm-1 hidden-xs">
                        <img src="./images/5.png" alt="xxx" class="img-responsive">
                      </div>
                      <div class="col-sm-4 col-xs-4">
                        <a href="product.html">产品名称</a>
                      </div>
                      <div class="col-sm-1 hidden-xs">
                        1
                      </div>
                      <div class="col-sm-2 hidden-xs">
                        $111111
                      </div>
                      <div class="col-sm-2 col-xs-4">
                        <button class="btn btn-sm btn-default">跟踪订单</button>
                      </div>
                      <div class="col-sm-2 c0l-xs-4"><a href="#">信息</a></div>
                    </div>
                  </div>
        </div>
      </div>
      <!-- 分页 -->
      <div class="col-sm-12">
        <ul class="pager">
          <li><a href="#">上一页</a></li>
          <li><a href="#">下一页</a></li>         
        </ul>
      </div>
    </div>
    
    <hr>
    <!-- 页脚 -->
    <footer>
        <div class="row">
          <div class="col-lg-12">
            <a href="index.html">bootstrap编写的商城页面</a>
          </div>
        </div>
      </footer>

    <script src="./js/jquery.js"></script>
    <script src="./bootstrap3/js/bootstrap.js"></script>
  </body>
</html>
